/*
  1. 知道Link和NavLink组件的区别————NavLink选中会有高亮类名
  2. 知道如何自定义高亮类名 activeClassName
  3. 💥知道：模糊匹配和精准匹配(exact)
    模糊匹配：url路径 包含 to属性或path属性
    例如：url:/test/123 to:/test 模糊匹配上就有高亮类名
    精准匹配 url路径与to属性或path属性 一模一样
  4：
    to属性，用于指定地址，会渲染成a标签的href属性
    activeClassName: 用于指定高亮的类名，默认`active`
    exact: 精确匹配，表示必须精确匹配类名才生效
*/

import React, { Component } from 'react';
import './index.css';
// HashRouter————带#号
import { HashRouter as Router, Route, Link } from 'react-router-dom';

export default class App extends Component {
  render() {
    return (
      <div>
        {/* Router负责路由实例化，包裹着所有路由代码 */}
        <Router>
          {/* Link组件，to属性代表我们要跳转的路径，需要以/开头*/}
          <Link to="/home">首页</Link> | &nbsp;
          <Link to="/myMusic">我的音乐</Link> | &nbsp;
          <Link to="/myFriend">我的朋友</Link>
          <br />
          {/* path配置路由的路径，component挂载组件名 */}
          {/* 只需要写路径即可，不要写 #/home */}
          {/* 通过 /模糊匹配，所有页面都能看到 */}
          <Route path="/" component={Header}></Route>
          {/* 不写path，也是模糊匹配，所有页面都能看到 */}
          <Route component={Header}></Route>
          {/* 首页给/模糊匹配，让所有页面都能看到首页数据 */}
          <Route path="/" component={Home}></Route>
          {/* 设置exact精确匹配，只有精确匹配到/路径才会显示Home组件数据 */}
          {/* <Route path="/" component={Home} exact></Route> */}
          {/* <Route path="/home" component={Home}></Route> */}
          
          <Route path="/myMusic" component={MyMusic}></Route>
          <Route path="/myFriend" component={MyFriend}></Route>
        </Router>
      </div>
    );
  }
}

function Header() {
  return <h3>我是Header组件--所有人都能看到我</h3>;
}
function Home() {
  return <h3>我是首页组件</h3>;
}
function MyMusic() {
  return <h3>我是我的音乐组件</h3>;
}
function MyFriend() {
  return <h3>我是我的朋友组件</h3>;
}
